<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌列表案例</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <link rel="stylesheet" href="./css/brandlist.css">
</head>

<body>

<div id="app">
    <!-- 卡片区域 -->
    <div class="card">
        <div class="card-header">
            添加品牌
        </div>
        <div class="card-body">
            <!-- 添加品牌的表单区域 -->
            <form @submit.prevent="add">
                <div class="form-row align-items-center">
                    <div class="col-auto">
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">品牌名称</div>
                            </div>
                            <input v-model.trim="brand" type="text" class="form-control" placeholder="请输入品牌名称">
                            <p>{{brand}}</p>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-2">添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">品牌名称</th>
            <th scope="col">状态</th>
            <th scope="col">创建时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" :id="'cb'+item.id" v-model="item.status">
                    <label class="custom-control-label" :for="'cb'+item.id" v-if="item.status === true">已启用</label>
                    <label class="custom-control-label" :for="'cb'+item.id" v-if="item.status === false">已禁用</label>
                </div>
            </td>
            <td>{{item.time | dateFormat | dateFormat2 }}</td>
            <td>
                <a href="javascript:;" @click="remove(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="../lib/vue-2.6.12.js"></script>
<script src="../lib/dayjs.min.js"></script>
<script>
    Vue.filter("dateFormat", function (val) {
        return dayjs(val).format("YYYY-MM-DD HH:MM:ss");
    });
    Vue.filter("dateFormat2", function (val) {
        return dayjs(val).format("YYYY-MM-DD HH:MM:ss ms");
    });
    const vm = new Vue({
        el: "#app",
        data: {
            list: [
                {id: 1, name: "宝马", status: true, time: new Date()},
                {id: 2, name: "奥迪", status: true, time: new Date()},
                {id: 3, name: "奔驰", status: false, time: new Date()},
                {id: 4, name: "兰博基尼", status: true, time: new Date()},
            ],
            brand: "",
            nextId: 4,
        },
        methods: {
            remove(id) {
                this.list = this.list.filter(item => item.id !== id);
            },
            add() {
                if (this.brand === '') {
                    alert("必须填写品牌名称！");
                    return
                }
                const obj = {
                    id: ++this.nextId,
                    name: this.brand,
                    status: true,
                    time: new Date(),
                }
                this.list.push(obj);
                this.brand = '';
            }
        }
    });

</script>
</body>

</html>